<template>
  <div class="login-box">
    <video class="video" autoplay muted loop src="../../assets/bg.mp4"></video>
    <div class="login-form">
      <h3>钱塘新区，欢迎你</h3>
      <div class="user-layout-login">
        <input
          type="text"
          class="ipt"
          placeholder="请输入用户名"
          @focus="focu"
        />
        <input
          type="password"
          class="ipt"
          placeholder="请输入密码"
          @focus="focu"
        />
        <div class="login-btn" @click="handleSubmit">
          <span>登录</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    focu() {},
    handleSubmit() {
     this.$router.push({path:'/home'})
    },
  },
};
</script>

<style lang="scss" scope>
.login-box {
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  // vertical-align: bottom;
  display: block;
  position: absolute;
  .video {
    width: 100%;
    height: 100%;
    display: block;
    -o-object-fit: cover;
    object-fit: cover;
  }
  .login-form {
    z-index: 110;
    width: 385px;
    height: 506px;
    background-color: #1883f12b;
    border: 1px solid #279bff;
    border-radius: 40px;
    right: 250px;
    top: 150px;
    position: absolute;
    &::before {
      content: "";
      width: 70%;
      background: url(../../assets/img/top-light.png) center center no-repeat;
      background-size: 100%;
      position: absolute;
      top: -11px;
      left: 15%;
      height: 20px;
    }

    &::after {
      content: "";
      width: 70%;
      background: url(../../assets/img/bottom-light.png) center center no-repeat;
      background-size: 100%;
      position: absolute;
      bottom: -10px;
      left: 15%;
      height: 20px;
    }
    h3 {
      text-align: center;
      font-size: 24px;
      margin-top: 62px;
      font-weight: 600;
      color: #fff;
      margin-bottom: 0;
      // height: 26px;
    }
    .user-layout-login {
      padding: 0 50px;
      margin-top: 66px;
      .ipt {
        width: 100%;
        font-size: 18px;
        text-align: center;
        color: #fff;
        line-height: 56px;
        background: transparent;
        border-bottom: 1px solid rgba($color: #fff, $alpha: 0.2);
      }
      .ipt:first-child {
        margin-bottom: 45px;
      }
      .ipt:nth-child(2) {
        margin-bottom: 66px;
      }
      .login-btn {
        margin: 0 auto;
        width: 100%;
        height: 56px;
        line-height: 56px;
        text-align: center;
        border-radius: 6px;
        color: #ffffff;
        font-size: 20px;
        background-color: rgba(21, 141, 255, 0.5);

        &.active,
        &:hover {
          cursor: pointer;
          background-color: #279bff7a;
        }
      }
    }
  }
}
</style>